<!DOCTYPE html>

<html>
    <head>
        <meta charset=UTF-8>
        <title>Stats demo</title>
        
        <script src="Stats.js"></script>
        <script>
            var COUNT = 256;    // 描画する四角形の数
            
            window.onload = function() {
                // Stats 生成
                var stats = enableStats();
                // Canvas 生成
                var canvas = document.getElementsByTagName("canvas")[0];
                canvas.onclick = function() { this.webkitRequestFullScreen(); }
                var context= canvas.getContext("2d");
                
                setInterval(function(){
                    
                    stats.update();
                    
                    // クリア
                    context.globalCompositeOperation = "source-over";   // 乗算設定
                    context.fillStyle = "black";
                    context.fillRect(0, 0, canvas.width, canvas.height);
                    
                    // 四角形描画
                    context.globalCompositeOperation = "lighter";   // 乗算設定
                    for (var i=0; i<COUNT; ++i) {
                        var x = Math.random()*(300-16);
                        var y = Math.random()*(150-16);
                        context.fillStyle = "hsl(" + (360/COUNT)*i + ", 50%, 50%)";
                        context.fillRect(x, y, 16, 16);
                    }
                    
                }, 1000/30);    // 30fps
                
            };
            
            var enableStats = function() {
                
                if (window.Stats === undefined) return null;
                
                var stats = new Stats();
                // 右上に設定
                stats.domElement.style.position = "fixed";
                stats.domElement.style.right    = "5px";
                stats.domElement.style.top      = "5px";
                document.body.appendChild(stats.domElement);
                
                return stats;
            };
        </script>
    </head>
    
    <body>
        <h1>Stats Demo</h1>
        <div>
            <canvas></canvas>
        </div>
    </body>
</html>
